<template>
  <view class="orderHeader">
    <view class="header">
      <scroll-view scroll-x="true" class="scroll-Y" scroll-with-animation="true"  :show-scrollbar="false" :scroll-into-view=toview>
          <view class="flex flex-align">
            <view class="scroll-view-item" v-for="(item,index) in tabList" :key="index" @click="tabIndex(item.id)" :id="'pro_'+item.id">
              <view :class="swIndex==item.id?'tabs active':'tabs'"> {{item.name}} </view>
            </view>
          </view>
      </scroll-view>
      <view class="search flex flex-align">
        <uni-icons type="search" size="30" color="#969799"></uni-icons>
        <input type="text" placeholder="输入关键词搜索" v-model="keyWord">
        <button @click="searchEnd">搜索</button>
      </view>
    </view>
    <view style="height: 225rpx;"></view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'

const dataInfo = defineProps({
  show: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  tabList: {
    type: Object,
    default: () => [{
      id:0,
      name:'全部'
    },
    {
      id:1,
      name:'待付款'
    },
    {
      id:2,
      name:'待配送'
    },
    {
      id:3,
      name:'待提货'
    },
    {
      id:4,
      name:'已完成'
    },
    {
      id:5,
      name:'退款售后'
    },]
  },
  type: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['submit', 'update:show'])
let swIndex = dataInfo.type
const toview = ref('')
const keyWord = ref('')
tabIndex(swIndex)
function tabIndex(index: any) {
  swIndex = index
  toview.value = 'pro_' + index
  emit('submit', index)
}
function searchEnd(){
  emit('submit', {keyWord:keyWord.value})
}

onMounted(() => {})
async function open() {
  updateShow(true)
}


function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.header{position: fixed;top: 0;left: 0;width: 100%;background: #fff;box-sizing: border-box;border-radius: 0 0 20rpx 20rpx;z-index: 111;
  .scroll-view-item{padding: 20rpx 30rpx;font-size: 28rpx;color: #969799;
    .tabs{position: relative;}
    .active{color: #333;font-weight: 600;
      &::after{content: '';position: absolute;bottom: -16rpx;left: 50%;transform: translateX(-50%);width: 50rpx;height: 12rpx;background: #FE4927;background: url('@/static/shop/shop07.png') no-repeat;
      background-size: 100% 100%;}
    }
  }
  .search{
    margin: 20rpx 30rpx 30rpx;
    background: #F5F5F5;
    border-radius: 100rpx;
    padding: 10rpx 20rpx;
   input{border: none;background: transparent;width: 470rpx;font-size: 26rpx;}
   button{background: #FE7431;color: #fff;border-radius:50rpx;padding: 0rpx 30rpx;font-size: 24rpx;}
  }
}
.scroll-Y{white-space: nowrap;width: 100%;box-sizing: border-box;}
</style>
